<template>
<div>
  <div class="content" v-if="true">
    <div class="descontent">
      <ul>
        <li class="mb-25">{{title+'名称：'}}{{desData.sceneName}}</li>
        <li class="mb-25">{{title+'编号：'}}{{desData.sceneNum}}</li>
        <li class="mb-25">{{title+'位置：'}}{{desData.sceneAd}}</li>
        <li class="mb-25">{{title+'状态：'}}
          <span :style="{color:desData.sceneStatus === 0?'#FFB415':'#2EBB25'}">{{desData.sceneStatus === 0 ? '未监测':'监测中'}}</span>
        </li>
        <li class="mb-25">操作：
            <span class="write" @click="editScene(desData)">编辑</span>
            <span class="delete" @click="deleteScene(desData.projectId,desData.sceneId,desData.sceneName)">删除</span>
        </li>
      </ul>
    </div>
    <slot></slot>
      <table border="0" cellspacing="0" cellpadding="0" class="table">
        <thead class="thead">
          <th>序号</th>
          <th>传感器编号</th>
          <th>传感器类型</th>
          <th>位置</th>
          <th>传感器ID</th>
          <th>状态</th>
          <th>电量</th>
          <th>预警值</th>
          <th>告警值</th>
          <th>操作</th>
        </thead>
        <tbody v-show="total" class="tbody">
          <tr v-for="(item, index) in tableList" :key="item.sceneTypeId">
            <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
            <td>{{ item.sensorName }}</td>
            <td>{{ item.deviceTypeName }}</td>
            <td>{{ item.location }}</td>
            <td>{{ item.sensorId }}</td>
            <td :style="{color:item.isValid?'#2EBB25':'#666666'}">{{ item.isValid?'在线':'离线'}}</td>
            <td>{{ item.power + '%' }}</td>
            <td>{{ item.sensorWarn }}</td>
            <td>{{ item.sensorAlarm }}</td>
            <td>
              <span class="write" @click="writeDevice(item)">编辑</span>
              <span class="delete" @click="deleteDevice(item.sensorId,item.deviceTypeName)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div  v-show="!total" class="empty flex-center">
        <span>暂无传感器</span>
      </div>
      <div class="block" v-if="total">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
  </div>
  <delete-alert-box
  v-if="isShowDelete"
  :isDelete=isDelete
  :descTips=descTips
  @Cancel=cancelDelete
  @Confirm=confirmDelete
  ></delete-alert-box>
</div>
</template>

<script>
export default {
  props: {
    title: {
      require: String,
      default: ''
    },
    desData: {
      require: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      currentPage: 1,
      isShowDelete: false,
      sensorId: '',
      sceneParams: {
        projectId: '',
        sceneId: ''
      },
      descTips: [],
      isDelete: true
    }
  },
  computed: {
    total () {
      return this.$store.state.sceneController.total
    },
    tableList () {
      return this.$store.state.sceneController.tableList
    }
  },
  methods: {
    handleCurrentChange (index) {
      this.$store.dispatch('sceneController/updateTableData', {
        projectId: 1,
        index,
        pageSize: 10,
        sceneId: this.$store.state.sceneController.sceneId
      })
    },
    deleteScene (projectId, sceneId, name) {
      if (this.tableList.length > 0) {
        this.isDelete = false
        this.descTips = [{
          tips: `“${name}”场景已关联传感器，无法删除`,
          type: 'default'
        }]
        this.isShowDelete = true
        return
      }
      this.isDelete = true
      this.descTips = [{
        tips: `确定删除“${name}”场景？`,
        type: 'default'
      }]
      this.isShowDelete = true
      this.sceneParams.projectId = projectId
      this.sceneParams.sceneId = sceneId
    },
    editScene (item) {
      sessionStorage.setItem('sceneId', item.sceneId)
      this.$router.push('/addhighFormSensor')
    },
    writeDevice (data) {
      this.$emit('editDevice', data)
    },
    deleteDevice (sensorId, name) {
      this.isDelete = true
      this.descTips = [{
        tips: `确定删除“${name}”传感器？`,
        type: 'default'
      }]
      this.isShowDelete = true
      this.sensorId = sensorId
    },
    cancelDelete () {
      this.isShowDelete = false
    },
    confirmDelete () {
      this.sensorId && this.$store.dispatch('sceneController/DeleteDevice', this.sensorId).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          this.$store.dispatch('sceneController/updateTableData', '')
          this.sensorId = ''
          this.isShowDelete = false
          this.isDelete = true
        }
      })
      // console.log(111)
      this.sceneParams.projectId && this.$store.dispatch('sceneController/DeleteScene', this.sceneParams).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          this.$store.dispatch('sceneController/updateResData', { sceneTypeId: 2 })
          this.sceneParams.projectId = ''
          this.isDelete = true
          this.isShowDelete = false
        } else {
          this.$message({
            message: res.data.message,
            type: 'error',
            duration: 500
          })
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
  .content{
    height: 80%;
    background-color: #fff;
    .descontent{
      padding-left: 60px;;
      ul{
        overflow: hidden;
        li{
          float: left;
          width: 300px;
          height:20px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:20px;
          .write {
              cursor: pointer;
              font-size: 14px;
              font-weight: 500;
              color: rgba(72, 104, 255, 1);
              text-decoration: underline;
            }
            .delete {
              cursor: pointer;
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
              color: rgba(251, 70, 70, 1);
              text-decoration: underline;
            }
        }
      }
    }
    .table {
      width: 100%;
      padding: 0 30px;
      background-color: #fff;
      .thead {
        background: rgba(87, 131, 255, 0.05);
        font-size: 14px;
        font-weight: 500;
      th {
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 24px;
        border-bottom: 1px solid #e6e6e6;
        font-size: 0.11667rem;
      }
    }
    .tbody {
      height: calc(100% - 60px);
      tr {
        height: 64px;
        td {
          max-width: 200px;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: left;
          padding-left: 24px;
          border-bottom: rgba(242, 242, 242, 1) 1px solid;
          font-size: 0.11667rem;
          color: #666666;
            .descOfDeviceType::after {
              content: "、";
            }
            .descOfDeviceType:last-child::after {
              content: "";
            }
            .write {
              cursor: pointer;
              font-size: 14px;
              font-weight: 500;
              color: rgba(72, 104, 255, 1);
              text-decoration: underline;
            }
            .delete {
              cursor: pointer;
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
              color: rgba(251, 70, 70, 1);
              text-decoration: underline;
            }
            span {
              padding-left: 4px;
            }
          }
        }
      }
    }
    .empty{
      height:64px;
      background:rgba(255,255,255,1);
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:20px;
    }
    .block {
      padding: 24px 0;
      margin-right: 28px;
      overflow: hidden;
      ::v-deep .el-pagination{
        float: right;
      }
    }
  }
</style>
